<template>
    <div class="bg-white p-[20px]">
        <a-typography>
            <a-typography-title :level="4">图标使用说明</a-typography-title>
            <a-typography-paragraph>
                <p>图标使用iconfont ，请到 <a href="https://www.iconfont.cn/" target="_blank">iconfont</a> 下载图标。</p>
                <p>使用格式：Font class</p>
                <p>下载后解压覆盖 /src/assets/iconfont/ 目录文件，即可使用自定义图标库</p>
            </a-typography-paragraph>
            <a-divider />
            <a-typography-title :level="4">自定义功能页面</a-typography-title>
            <a-typography-paragraph>
                <p>1：先【开发】【菜单管理】创建菜单</p>
                <p>2：在模板/src/pages/ 下创建页面</p>
                <p>3：开发api接口等</p>
                <p>4：分配账号权限</p>
            </a-typography-paragraph>
            <a-divider />
            <a-typography-title :level="4">常用组件示例</a-typography-title>
            <a-typography-title :level="5">上传图片（单图）</a-typography-title>
            <a-typography-paragraph copyable>
                {{ htmlCode.upload }}
            </a-typography-paragraph>
            <p>单图和多图上传都是返回的字符串，用，隔开的</p>
            <a-typography-title :level="5">上传图片（多图）</a-typography-title>
            <a-typography-paragraph copyable>
                {{ htmlCode.selectIcon }}
            </a-typography-paragraph>
            <p>选择图标会返回icon的type。如：right，使用链接上icon-，“iconfont icon-”</p>
            <p>示例：<span class="iconfont !text-[16px] icon-home"></span></p>
            <a-divider />
        </a-typography>
    </div>
</template>
<script lang="ts" setup>
import { reactive} from 'vue';
const htmlCode = reactive({
    upload: `<upload-image v-model="value" />`,
    selectIcon: `<select-icon v-model="value" />`
});
</script>